body {
    background-color: black;
    margin: 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(5, 19.6vw);
    justify-content: center;
}

.purple-tile,
.white-tile,
.black-tile,
.purple-tile-left,
.white-tile-left,
.black-tile-left,
.about-me-button,
.portfolio-button {
    width: 19.6vw;
    height: 19.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12vw;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: background-color 0.2s ease-out;
}

.purple-tile, .purple-tile-left { background-color: #8943eb; color: #fff; }
.contact-tile, .white-tile, .white-tile-left   { background-color: #fff;    color: #000; }
.black-tile, .black-tile-left   { background-color: #000;    color: #8943eb; }

.purple-tile-left, .white-tile-left, .black-tile-left { justify-content: left; }

.about-me-button {
    background-color: #fff;
    color: #000;
    font-size: 5vw;
    text-decoration: none;
    text-align: center;
}

.portfolio-button {
    background-color: #8943eb;
    color: #fff;
    font-size: 3vw;
    text-decoration: none;
    text-align: center;
}

.about-me-button:hover { background-color: #939393; }
.portfolio-button:hover { background-color: #6b2dc2; }

.abt-area {
    background-color: #2c2c2c;
    color: white;
    padding: 2vw;
    font-size: 2.7vw;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1.5;
    margin: 2vw;
    text-align: center;
}

.contact-tile {
    width: 97.9vw;
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12vw;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: background-color 0.2s ease-out;
    margin-top: 2vw;
}

.link { color: rgb(139, 139, 244) }

.w1 { width: 19vw; margin-right: 35vw; margin-bottom: 20vw }
.w2 { width: 40vw; margin-right: 45vw; margin-bottom: 20vw }
.w3 { width: 25vw; margin-right: 10vw; margin-bottom: 20vw }
.w4 { width: 42vw; margin-right: 50vw; margin-bottom: 20vw }
.w5 { width: 42vw; margin-right: 30vw; margin-bottom: 20vw }
.w6 { width: 42vw; margin-right: 46vw; margin-bottom: 20vw }
.w7 { width: 42vw; margin-right: 30vw; margin-bottom: 20vw }

.a1 { width: 30vw; margin-right: 25vw; margin-bottom: 20vw }
.a2 { width: 30vw; margin-right: 39.5vw; margin-bottom: 20vw }
.a3 { width: 30vw; margin-right: 15vw; margin-bottom: 20vw }